<!--
 * @Description: 
 * @Autor: 商晓彬
 * @Date: 2021-06-18 11:07:32
 * @LastEditors: 商晓彬
 * @LastEditTime: 2022-02-16 09:44:22
-->
<div class="user-code">
    <div class="m-subheader">
        <div class="row align-items-center">
          <div class="mr-auto col-auto">
            <h3 class="m-subheader__title m-subheader__title--separator">
              <span>用户字典</span>
            </h3>
          </div>
        </div>
    </div>
        <!-- <div style="width: 100%; height: 759px; background-color: #fff ;"> -->
            <!-- <div style="width: 100%; height: 40px; padding-top: 10px;margin-bottom: 10px; display: flex;"> -->
                <!-- <div style="margin-right: 100px;display: flex;margin-left: 12px;">
                    <span style="width: 85px;line-height: 30px;">功能模块：</span>
                    <input type="text" name="function" size="30" pInputText [(ngModel)]="function" class="form-control"/>
                </div>
                <div style="margin-right: 100px;display: flex;">
                    <span style="width: 50px;line-height: 30px;">名称：</span>
                    <input type="text" name="name" size="30" pInputText [(ngModel)]="name" class="form-control"/>
                  </div>
                <div style="margin-right: 100px;">
                    <span style="width: 50px;line-height: 30px;">是否使用：</span>
                    <p-dropdown [options]="isUseds" [(ngModel)]="isUsed" placeholder="请选择" optionLabel="name">
                    </p-dropdown>
                </div>
                <div style="margin-left: 100px;">
                    <p-button label="搜索" (onClick)="serach()"></p-button>
                    <p-button label="重置" (onClick)="resetSearch()" style="margin-left: 30px;"></p-button>
                  </div>
            </div> -->
           
        <!-- </div> -->
        <!-- </div> -->
        <div style="width: 100%;">
        <div class="ui-g">
            <div class="ui-g-4">
                <p-tabView>
                    <p-tabPanel header="类别" [selected]="true" style="background-color: grey;color: black;">
                        <div class="primeng-datatable-container">
                             <p-table #typeData [value]="primengTableHelper.records" (onLazyLoad)="getTypeTableList($event)"
                            rows="{{primengTableHelper.defaultRecordsCountPerPage}}" [paginator]="false" [lazy]="true"
                            [scrollable]="true" ScrollWidth="100%" [responsive]="primengTableHelper.isResponsive"
                            [resizableColumns]="primengTableHelper.resizableColumns"
                            selectionMode="single" [(selection)]="selected">
                            <ng-template  pTemplate="header" let-columns>
                                <tr>
                                    <th style="width: 50px">序号</th>
                                    <th style="width: 150px">名称</th>
                                    <th style="width: 150px">代码</th>
                                    <th style="width: 150px">备注</th>
                                  </tr>
                            </ng-template>
                            <ng-template  pTemplate="body" let-record="$implicit" let-rowIndex="rowIndex">
                                <tr  (click)="searchSon(record)" [pSelectableRow]="record">
                                    <td style="width: 50px">{{rowIndex+1}}</td>
                                    <td style="width: 150px">{{record.description}}</td>
                                    <td style="width: 150px">{{record.code}}</td>
                                    <td style="width: 150px">{{record.remark}}</td>
                                </tr>
                            </ng-template>
                            </p-table>
                            <div class="primeng-paging-container">
                                <p-paginator [rows]="primengTableHelper.defaultRecordsCountPerPage" #typePaginator
                                (onPageChange)="getTypeTableList($event)" [totalRecords]="primengTableHelper.totalRecordsCount"
                                [rowsPerPageOptions]="primengTableHelper.predefinedRecordsCountPerPage">
                              </p-paginator>
                              <span class="total-records-count">
                                {{'TotalRecordsCount' | localize:primengTableHelper.totalRecordsCount}}
                              </span>
                            </div>
                        </div>
                       
                    </p-tabPanel>
                </p-tabView>
            </div>
            <div class="ui-g-8">
                <p-tabView>
                    <p-tabPanel header="子级" [selected]="true" style="background-color: grey; color: black;">
                        <div style="margin-bottom: 20px">
                            <button *ngIf="'Pages.UserDictionary.newlyAdded' | permission" pButton type="button" label="新增" (click)="addSon()" style="margin-right: 0.5rem"></button>
                        </div>
                        <div class="primeng-datatable-container">
                            <p-table #sonData [value]="primengSonTableHelper.records"
                            rows="{{primengSonTableHelper.defaultRecordsCountPerPage}}" [paginator]="false"
                            [scrollable]="true" ScrollWidth="100%" [responsive]="primengSonTableHelper.isResponsive"
                            [resizableColumns]="primengSonTableHelper.resizableColumns">
                            <ng-template  pTemplate="header">
                                <tr>
                                    <th style="width: 100px">操作</th>
                                    <th style="width: 50px">序号</th>
                                    <th style="width: 150px">子级名称</th>
                                    <th style="width: 150px">是否启用</th>
                                    <!-- <th style="width: 150px">是否设置为默认值</th> -->
                                    <th style="width: 150px">备注</th>
                                  </tr>
                            </ng-template>
                            <ng-template  pTemplate="body" let-record="$implicit" let-rowIndex="rowIndex">
                                <tr>
                                    <td style="width: 100px">
                                        <div class="btn-group dropdown" dropdown container="body">
                                          <button dropdownToggle class="dropdown-toggle btn btn-sm btn-primary">
                                            <i class="fa fa-cog"></i><span class="caret"></span> 操作
                                          </button>
                                          <ul class="dropdown-menu" *dropdownMenu>
                                              <li>
                                                  <a *ngIf="'Pages.UserDictionary.Modify' | permission" href="javascript:;" (click)="update(record)">修改</a>
                                                </li>
                                            <li>
                                              <a *ngIf="'Pages.UserDictionary.Delete' | permission" href="javascript:;" (click)="delete(record)">删除</a>
                                            </li>
                                          </ul>
                                        </div>
                                    </td>
                                    <td style="width: 50px">{{rowIndex+1}}</td>
                                    <td style="width: 150px">{{record.description}}</td>
                                    <td style="width: 150px">{{record.isUsed == 0? '停用': '启用'}}</td>
                                    <!-- <td style="width: 150px">{{record.show}}</td> -->
                                    <td style="width: 150px">{{record.remark}}</td>
                                </tr>
                            </ng-template>
                            </p-table>
                            <div class="primeng-paging-container">
                                <p-paginator [rows]="primengSonTableHelper.defaultRecordsCountPerPage" #sonPaginator
                                [totalRecords]="primengSonTableHelper.totalRecordsCount"
                                [rowsPerPageOptions]="primengSonTableHelper.predefinedRecordsCountPerPage"
                                (onPageChange)="getSonTableList($event)">
                              </p-paginator>
                              <span class="total-records-count">
                                {{'TotalRecordsCount' | localize:primengSonTableHelper.totalRecordsCount}}
                              </span>
                            </div>
                        </div>
                        
                    </p-tabPanel>
                </p-tabView>
            </div>
        </div>
    <!-- 新增或修改 -->
    <userCodeEditOrAdd #userCodeEditOrAdd [editData]="rowdata" [sonData]="son"  [title]="title" (modalSave)="getSonTableList()"> </userCodeEditOrAdd>
</div>
